import React from 'react';
import './horizontal_4.css'

class Horizontal_4 extends React.Component {
    constructor(props){
        super(props);
        this.state={
            eid:props.eid,
            maxTHeight:'0',
            maxBHeight:'0'
        }
        this.updateData=this.updateData.bind(this);
        this.rdCss=this.rdCss.bind(this);

    }
    componentDidMount(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        this.updateData();

    }

    updateData(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        if(datainfo!=null&&datainfo.length>0){

            let maxTopHeight=0;
            let maxBottomHeight=0;
            datainfo.map((item, i) => {
                let topHeight=0;
                let bottomHeight=0;
                if(i%2==0){
                    let topDivClass=".horizontal_4_"+eid+" .content_"+eid+"_"+i;
                    let topDiv=document.querySelector(topDivClass);
                    topHeight=parseInt(Number(this.rdCss(topDiv, 'height')));

                    let bottomDivClass=".horizontal_4_"+eid+" .timedata_"+eid+"_"+i;
                    let bottomDiv=document.querySelector(bottomDivClass);
                    bottomHeight=parseInt(Number(this.rdCss(bottomDiv, 'height')));

                }else{
                    let topDivClass1=".horizontal_4_"+eid+" .timedata_"+eid+"_"+i;
                    let topDiv1=document.querySelector(topDivClass1);
                    topHeight=parseInt(Number(this.rdCss(topDiv1, 'height')));

                    let bottomDivClass1=".horizontal_4_"+eid+" .content_"+eid+"_"+i;
                    let bottomDiv1=document.querySelector(bottomDivClass1);
                    bottomHeight=parseInt(Number(this.rdCss(bottomDiv1, 'height')));
                }

                if(parseInt(topHeight)>parseInt(maxTopHeight)){
                    maxTopHeight=topHeight
                }
                if(parseInt(bottomHeight)>parseInt(maxBottomHeight)){
                    maxBottomHeight=bottomHeight
                }
            })
            this.setState({maxTHeight:parseInt(maxTopHeight)+50,maxBHeight:parseInt(maxBottomHeight)+50});

        }


    }

    rdCss() {
        var obj = arguments[0];
        var options = arguments[1];
        if (!!obj === false || typeof options === 'undefined') {
            return null;
        }
        if (typeof options === 'string') {
            let res = document.defaultView.getComputedStyle(obj, null)[options];
            res = Number(res.replace('px', ''));
            return res;
        }
        if (typeof options === 'object') {
            for (var i in options) {
                obj.style[i] = options[i];
            }
        }
    }

    render(){
        const {datainfo}=this.props;
        const {eid}=this.state;
        let {maxTHeight,maxBHeight}=this.state

        let eventsWidth=0;
        let maxHeight=0;
        let style
        if(datainfo!=null&&datainfo.length>0){
            maxHeight=parseInt(maxBHeight)+parseInt(maxTHeight)+200;
            eventsWidth=(datainfo.length)*190+50;
            style={width:'10px',height:'10px',left:eventsWidth,top:'-18px',background:'#adadad',borderRadius:'50%'};
        }

        let topHeight=maxTHeight+100;
        if(maxHeight<200){
            maxHeight=200;
        }

        return<div className="timeline-horizontal-4 ">
                { datainfo!=null&&datainfo.length>0?
                    <div className="timeline" style={{height:maxHeight}}>
                        <div className={"timeline-data timeline-data-"+eid}>
                            <div className={"horizontal_4 horizontal_4_"+eid} style={{width:eventsWidth,top:topHeight}}>
                                <ol>
                                {
                                    datainfo.map((item,i)=>{
                                    const leftWidth=190*(i)+50;
                                    let count=0;

                                    let timelineDivClass=".horizontal_4_"+eid+" .timedata_"+eid+"_"+i;
                                    let timelineDiv=document.querySelector(timelineDivClass);
                                    let timelineHeight=parseInt(Number(this.rdCss(timelineDiv, 'height')));

                                    let marginTop=timelineHeight+60;

                                     i%2==1?count=1:'';
                                    let contentdata=item.content;
                                    let contentArr=contentdata.split(/\n/g);
                                    return <li>
                                                <a href="#0"  style={{left:leftWidth}} className={"num_"+i%5}  data-date={item.timeline} >
                                                { i%2==0?
                                                    <div>
                                                        <div className={"count_"+count +" content_"+i+" content_"+eid+"_"+i}>
                                                            <span>
                                                                {
                                                                    contentArr.map((item,i)=>{
                                                                    if(item==""){
                                                                        return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block',height:'20px'}}>{item}</span>
                                                                    }
                                                                        return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                                    })
                                                                }
                                                            </span>
                                                        </div>
                                                        <div style={{bottom:"0",position:'absolute'}} className={"divCount_"+count}>
                                                            <div className="div_1" style={{width:'7px',height:'7px',margin:'0 auto',borderRadius:'50%'}}></div>
                                                            <div className="div_2" style={{width:'93px',height:'52px',borderRight:'1px solid #c7c7c7'}}></div>
                                                        </div>
                                                        <span className={" timedate spanCount_"+count+" timedata_"+eid+"_"+i} style={{display:'block',position:'absolute',marginTop:'10px',fontSize:'14px',wordBreak:'break-all',textAligh:'center',width:'100%'}}>{item.timeline}</span>
                                                    </div>
                                                    :
                                                    <div>
                                                        <span className={"wea-f12 timedate spanCount_"+count+" timedata_"+eid+"_"+i} style={{display:'block',position:'relative',top:'25px',fontSize:'14px',wordBreak:'break-all',textAligh:'center',width:'185px;',marginBottom:'10px'}}>{item.timeline}</span>
                                                        <div style={{bottom:"0",position:'absolute'}} className={"divCount_"+count}>
                                                            <div className="div_1" style={{width:'7px',height:'7px',margin:'0 auto',borderRadius:'50%'}}></div>
                                                            <div className="div_2" style={{width:'93px',height:'52px',borderRight:'1px solid #c7c7c7'}}></div>
                                                        </div>
                                                        <div className={"count_"+count +" content_"+i+" content_"+eid+"_"+i} >
                                                            <span>
                                                                {
                                                                    contentArr.map((item,i)=>{
                                                                        if(item==""){
                                                                            return <span style={{display:'block',height:'20px'}}></span>
                                                                        }
                                                                        return <span style={{paddingLeft:'6px',paddingRight:'6px',display:'block'}}>{item}</span>
                                                                    })
                                                                }
                                                            </span>
                                                        </div>


                                                    </div>
                                                }
                                                </a>
                                            </li>
                                        })
                                }
                            </ol>
                            <div style={style}></div>
                        </div>
                    </div>
                </div>
                :
                <div style={{textAlign:'center'}}><img src="/spa/portal/images/timelinestyle/nodata.png" /></div>
            }
            </div>

    }

}
export default Horizontal_4;